<template>
  <div class="overview flex flex-jc-sp" v-if="build">
    <img class="czg" :src="build.thumb" alt="" />
    <div class="info">
      <div class="flex flex-jc-sp mb-32">
        <div><span style="color: #888">层数:</span> {{ build.cengshu }}层</div>
        <div><span style="color: #888">电梯数:</span> {{ build.keti }}台</div>
        <div><span style="color: #888">待出租:</span> {{ build.is_zu }}套</div>
      </div>
      <div class="mb-32">
        <span style="color: #888">物业:</span> {{ build.wuye }}
      </div>
      <div
        class="color-666 flex flex-ai-c pd-32 mb-32"
        style="border-bottom: 1px solid #e4e4e4"
      >
        <img
          style="margin-right: 6px"
          src="~@/assets/images/icon_metro.png"
          alt=""
          srcset=""
        />
        {{ build.station }}
      </div>
      <div class="flex flex-jc-sp">
        <div class="flex flex-fd-c">
          <div class="color-666 mb-16">单价</div>
          <div class="fs-24 color-000" style="font-weight: bold">
            {{ build.price }}元/㎡
          </div>
        </div>
        <div class="flex flex-fd-c">
          <div class="color-666 mb-16">面积</div>
          <div class="fs-24 color-000" style="font-weight: bold">
            {{ build.area }}㎡
          </div>
        </div>
        <div class="flex flex-fd-c">
          <div class="color-666 mb-16">待出租面积</div>
          <div class="fs-24 color-000" style="font-weight: bold">
            {{ build.area }}㎡
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    build: {
      type: Object,
      default: () => ({
        address: '南山粤海大道1号',
        area: '10000',
        cate_id: 1,
        cenggao: '4.2米',
        cengshu: '29',
        content: '',
        hot: '100',
        id: 1,
        is_top: 1,
        is_zu: '10',
        kaifas: '华润',
        keti: '10',
        name: '大冲商务中心',
        price: '10000.00',
        qiye: 'X',
        region_dis_id: 1,
        station: '1号线高新园站20米',
        thumb:
          'http://m.huangxh.top\\uploads\\admin\\article_thumb\\20201113\\e5f4ffc4b73aad7e92896fadb8617b7f.jpeg',
        wuye: '保利物业',
      }),
    },
  },
  watch: {
    build(newValue, oldValue) {},
  },
}
</script>

<style lang="less" scoped>
.overview {
  padding: 24px;
  margin-bottom: 28px;
  background-color: #fafafa;
  border-radius: 6px;
  .mb-16 {
    margin-bottom: 16px;
  }
  .mb-32 {
    margin-bottom: 32px;
  }
  .pd-32 {
    padding-bottom: 32px;
  }
  .fs-24 {
    font-size: 24px;
  }
  .czg {
    width: 420px;
    height: 320px;
    border-radius: 6px;
  }
  .info {
    padding: 24px 36px;
    flex: 1;
  }
  .color-333 {
    color: #333;
  }
  .color-666 {
    color: #666;
  }
  .color-999 {
    color: #999;
  }
  .mb-18 {
    margin-bottom: 18px;
  }
}
</style>